<template>
  <div class="firstManage wrap-table">
    <el-form ref="form" :model="searchData" label-width="100px" class="clearfix searchForm" label-position="left">
      <el-form-item label="初筛时间" class="pull-left item-right" style="width:400px">
        <div class="block" >
          <el-date-picker  v-model="timeDate" value-format="yyyy-MM-dd"type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="招募地点" class="pull-left item-right" style="width:260px">
        <el-select v-model="searchData.recruitPlaceId" clearable placeholder="请选择">
          <el-option v-for="item in options1"
                     :key="item.SYS_ID"
                     :label="item.Name"
                     :value="item.Code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" class="pull-left item-right">
        <el-input v-model="searchData.keyWord" placeholder="请输入初筛编号或研究编号"  style="width:200px;margin-left: -50px;">
        </el-input>
      </el-form-item>
      <!-- 操作区域 -->
      <div class="pull-right">
        <el-button @click="searchHandler" type="primary" class="">查询</el-button>
        <el-button @click="addHandler" class="">添加</el-button>
      </div>

    </el-form>
    <!---->
    <template>
      <el-table :height="maxHeight" :data="tableData" class="tableHeight" header-row-class-name="higtLight" border  v-loading="loading"  element-loading-text="加载中" style="width: 100%">
        <!--<el-table-column align="center" label="序号" width="70">-->
            <!--<template slot-scope="scope">-->
              <!--{{scope.$index+1}}-->
            <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" label="初筛编号" min-width="100" prop="ScreenId">

        </el-table-column>
        <el-table-column prop="Surname" label="姓氏" align="center" min-width="70">

        </el-table-column>
        <el-table-column prop="FirstLetter" label="姓名首字母" align="center" min-width="100">

        </el-table-column>
        <el-table-column prop="BirthDate" label="出生日期" align="center" min-width="100">

        </el-table-column>
        <el-table-column :formatter="mobileFilter" prop="Mobile" label="手机号" align="center" min-width="110">

        </el-table-column>
        <el-table-column prop="RecruitPlace" :show-overflow-tooltip="true" label="招募地点" align="center" min-width="100">

        </el-table-column>
        <el-table-column prop="ScreenDate" label="初筛时间" align="center" min-width="110">

        </el-table-column>
        <el-table-column prop="Reason"   :show-overflow-tooltip="true" label="不符合初筛的原因" align="center" min-width="160">

        </el-table-column>
        <el-table-column prop="IsJoin" :formatter="isJoinFilter" label="参加项目" align="center" min-width="80">

        </el-table-column>
        <el-table-column prop="Period"  :formatter="PeriodFilter" label="用户阶段" align="center" min-width="80">

        </el-table-column>
        <el-table-column prop="SignInformedConsent" :formatter="isJoinFilter"  label="签署知情同意书" align="center" min-width="140">

        </el-table-column>
        <el-table-column prop="SignInformedConsentDate" label="签署日期" align="center" min-width="110">

        </el-table-column>
        <!--<el-table-column prop="ResearchNo" label="纳入后的研究编号" align="center" min-width="160">-->

        <!--</el-table-column>-->
        <el-table-column prop="RefuseReason" :show-overflow-tooltip="true" label="未纳入原因" align="center" min-width="120">

        </el-table-column>
        <el-table-column min-width="100" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="queryHandler(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <div class="block mg-20-auto pagination-fixed">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageId" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 添加初筛对象的对话框 -->
    <el-dialog title="添加初筛对象"  @open="beforeOpenHandler('ruleForm')"  :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
      <GeminiScrollbar style="height: 60vh">
        <div style="margin-right: 20px">
          <el-form :model="form" :rules="rules" ref="ruleForm" >
            <el-form-item label="姓" :label-width="formLabelWidth" prop="Surname">
              <el-input v-model="form.Surname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="名" :label-width="formLabelWidth">
              <el-input v-model="form.Name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名首字母" :label-width="formLabelWidth">
              <el-input v-model="form.FirstLetter" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
              <el-date-picker type="date" value-format="yyyy-MM-dd" default-value="1990-06-15" placeholder="选择日期" v-model="form.BirthDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="Mobile">
              <el-input v-model="form.Mobile" type="number" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="招募地点" :label-width="formLabelWidth">
              <el-select v-model="form.RecruitPlaceId" placeholder="请选择招募地点"  class="selectName">
                <el-option
                        v-for="item in options2"
                        :key="item.SYS_ID"
                        :label="item.Name"
                        :value="item.Code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户阶段" :label-width="formLabelWidth">
              <el-select v-model="form.Period" placeholder="请选择研究阶段"  class="selectName"  @change="prediods">
                <el-option
                        v-for="item in options5"
                        :key="item.vale"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="初筛时间" :label-width="formLabelWidth">
              <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.ScreenDate" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="不符合初筛的原因" :label-width="formLabelWidth" >
              <el-select v-model="form.ExcludeReasonId" placeholder="请选择不符合初筛的原因" clearable @change="changeSelect">
                <el-option
                        v-for="item in options3"
                        :key="item.SYS_ID"
                        :label="item.Reason"
                        :value="item.Reason">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="未纳入原因" :label-width="formLabelWidth">
              <el-select v-model="form.RefuseReason" placeholder="请选择"  class="selectName" clearable  @change="changeSelect">
                <el-option label="对生命树项目不感兴趣" value="对生命树项目不感兴趣"></el-option>
                <el-option label="太忙了没时间参加" value="太忙了没时间参加"></el-option>
                <el-option label="因为生物样本收集，如晕针等" value="因为生物样本收集，如晕针等"></el-option>
                <el-option label="丈夫或其他家庭成员不同意" value="丈夫或其他家庭成员不同意"></el-option>
                <el-option label="住址离调查现场太远" value="住址离调查现场太远"></el-option>
                <el-option label="其他原因" value="其他原因"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参加项目" :label-width="formLabelWidth">
              <el-select :disabled="disabledRegion1" v-model="form.IsJoin" placeholder="请选择是否参加项目">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="签署知情同意书" :label-width="formLabelWidth">
              <el-select v-model="form.SignInformedConsent" placeholder="请选择是否签署知情同意书" :disabled="disabledRegion1">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
                <el-option label="需考虑" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="签署日期" :label-width="formLabelWidth">
              <el-date-picker :disabled="disabledRegion1" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions1" placeholder="选择日期" v-model="form.SignInformedConsentDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <!--<el-form-item label="纳入后的研究编号" :label-width="formLabelWidth">-->
              <!--<el-input v-model="formInput" auto-complete="off" :disabled="disabledRegion1"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="研究编号" :label-width="formLabelWidth" prop="ResearchNo">-->
              <!--<el-input v-model="form.ResearchNo" auto-complete="off" placeholder="请再输入一遍" :disabled="disabledRegion1"></el-input>-->
            <!--</el-form-item>-->

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSure('ruleForm')">确 定</el-button>
          </div>
        </div>
      </GeminiScrollbar>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    var validateYanj2 = (rule, value, callback) => {
        if (this.formInput !== '') {
            if(value === ''){
                callback(new Error('请再次输入'));
            }
            else if (value !== this.formInput){
                callback(new Error('两次输入不一致!'));
            }
            else {
                callback();
            }
        }
        else {
            callback();
        }
    };
    var validateMobile = (rule, value, callback) => {
        let regex = new RegExp(
                /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
        );
        if (value == "") {
            callback();
        } else if (value !== "" && value.length !== 11) {
            callback(new Error("请输入正确的手机号位数"));
        } else {
            if (regex.test(value)) {
                callback();
            } else {
                callback(new Error("请输入正确的手机号"));
            }
        }
    }
    return {
      pickerOptions1: {
        // 设置签署日期的禁用选项
        disabledDate(date) {
          if (date > new Date()) {
            return true;
          }
        }
      },
      disabledRegion1: false,
      timeDate:[],
      formInput:'',
      currentDate: new Date(),
      searchData: {
        sysId:'',
        recruitPlaceId: "",
        keyWord: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "150px",
      tableHeight:'auto',
      prediod:'1',
      form: {
        SYS_ID:'',
        ScreenId:'',
        Surname:'',
          Name:'',
          FirstLetter:'',
          BirthDate:'',
          Mobile:'',
          RecruitPlaceId:'',
          RecruitPlace:'',
          ScreenDate:dateForm(new Date()),
          ExcludeReasonId:'',
          IsJoin:'',
          SignInformedConsent:'',
          SignInformedConsentDate:'',
          ResearchNo:'',
          RefuseReason:'',
          Period:'1'
      },
      rules: {
        Surname: [{ required: true, message: "请输入姓", trigger: "blur" }],
        ResearchNo:[{ validator: validateYanj2, trigger: 'blur' }],
        Mobile: [{ validator: validateMobile, trigger: "blur" }]
      },
      tableData: [],
      pageId: 1,
      total: null,
      loading: true,
      pageSize: 10,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      maxHeight:'',
      options1: [],  //招募地点
      options2:[],   //招募地点
      options3:[],   //不符合初筛原因
      options5:[{value: '1', label: '孕前期'}, {value: '2', label: '怀孕期'}],//研究阶段

    };
  },
  components: {},
//  watch: {
//    "form.ExcludeReasonId"(value) {
//      if (value) {
//        this.form.IsJoin = '0';
//        this.disabledRegion1 = true;
//      }
//      else{
//        this.disabledRegion1 = false;
//      }
//    }
//  },
  beforeMount:function() {
    let that=this;
    let appHeight=$(window).height();
    let autoheight=(appHeight-200)+'px'
    that.maxHeight=autoheight
  },
  methods: {
    mobileFilter(row, column, cellValue, index) {
      if(cellValue!=='' &&cellValue!==undefined){
        return cellValue.substr(0,3)+"****"+cellValue.substr(7);
      }
    },
    changeSelect(val) {
      let isTrue=false;
      if((this.form.ExcludeReasonId!==''&&this.form.ExcludeReasonId!==undefined)||(this.form.RefuseReason!==''&&this.form.RefuseReason!==undefined)){
        isTrue=true
      }
      if (val !== "") {
        this.form.IsJoin = "0";
        this.form.SignInformedConsent=''
        this.form.SignInformedConsentDate=''
        this.formInput=''
        this.form.ResearchNo=''
        this.disabledRegion1 = true;
      } else {
        if(!isTrue){
          this.form.IsJoin = "";
          this.disabledRegion1 = false;
        }
      }
    },
    PeriodFilter(row, column, cellValue, index){
      if(cellValue==1){
        return '孕前期'
      }
      else if(cellValue==2){
        return '怀孕期'
      }
      else{
        return '-'
      }
    },
    isJoinFilter(row, column, cellValue, index){
        if(cellValue==1){
          return '是'
        }
      else if(cellValue==2){
          return '否'
        }
      else if(cellValue==3){
          return '需考虑'
        }
      else {
          return '-'
        }
    },
    handleSizeChange(val) {       //条数改变
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {      //页数改变
      this.pageId = val;
      this.getList();
    },
    prediods:function(val){
      this.resonLIst()
    },
    addSure(formName){    //确认添加
      let that=this;
      let valT=$('.selectName input').val();
      if(valT!==''){
          that.form.RecruitPlace=valT
      }
      console.log(that.form)
      that.$refs[formName].validate((valid) => {
          if (valid) {
           that.service({
                  url: "/ResearchObject/SaveFirstScreen",
                  method: "post",
                  data: {
                    ...that.form,
                  }
              })
            .then(response => {
              that.dialogFormVisible=false
              that.$message({
                type:'success',
                message:response.msg
              })
              that.getList();
              that.loading = false;
            })
            .catch(data => {
                that.loading = false;
            });
          }
          else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    getList() {
      let that = this;
      that
        .service({
          url: "/ResearchObject/GetFirstScreen",
          method: "get",
          params: {
            pageCount: (that.pageId-1),
            pageSize: that.pageSize,
            ...that.searchData,
            startScreenDate:that.timeDate?that.timeDate[0]:'',
            endScreenDate:that.timeDate?that.timeDate[1]:'',
          }
        })
        .then(response => {
          that.tableData = response.dtData
          that.total =parseInt(response.dtData[0].TotalCount);
          that.loading = false;
        })
        .catch(data => {
          that.loading = false;
        });
    },
    searchHandler() {
      this.pageId = 1; // 分页索引
      this.pageCount=0;
      this.total=null;
      this.getList();
    },
    // 查看操作
    queryHandler(index, row) {
     this.$router.push({ path: "/firstManage/detail", query: { id: JSON.stringify(row) } });
    },
    addHandler() {
      this.form={
        SYS_ID:'',
        ScreenId:'',
        Surname:'',
        Name:'',
        FirstLetter:'',
        BirthDate:'',
        Mobile:'',
        RecruitPlaceId:'',
        RecruitPlace:'',
        ScreenDate:dateForm(new Date()),
        ExcludeReasonId:'',
        IsJoin:'',
        SignInformedConsent:'',
        SignInformedConsentDate:'',
        ResearchNo:'',
        RefuseReason:'',
        Period:'1'
      }
      this.dialogFormVisible = true;
    },
    beforeOpenHandler(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    zhaoAdress(){   //招募地点
      let that=this;
      that.service({
          url: "/Dic/GetRecruitPlace",
          method: "get",
          params: {
            placeCode: "",
            placeName: "",
            pageCount:0,
            pageSize: 100,
          }
        }).then(resp =>{
              let obj={
                Code:'',
                SYS_ID:'',
                Name:'全部'
              }
              let ary=JSON.parse(JSON.stringify(resp.dtData))
              that.options2=resp.dtData;
              that.options1=ary;
              that.options1.unshift(obj)
          }).catch(data => {
            console.log(data)
      })},
      resonLIst() {   //不符合初筛原因
        let that = this;
        that.service({
            url: "Dic/GetExcludeReason",
            method: "get",
            params: {
              pageCount:0,
              pageSize: 100,
              userType: that.form.Period,
              keyWord: ''
          }
      })
      .then(response => {
          that.options3=response.dtData
      })
      .catch(data => {

      });
      },
  },
  mounted() {
    let that = this;
    let dMounth=new Date(this.currentDate.setMonth(this.currentDate.getMonth() - 3));
    that.timeDate= [
      (dMounth.getFullYear()+'-'+addZero(dMounth.getMonth())+'-'+addZero(dMounth.getDate())),
      (new Date().getFullYear()+'-'+addZero((new Date().getMonth()+1))+'-'+addZero(new Date().getDate())),
    ];   //初始化时间范围
    that.getList();
    that.zhaoAdress()
    that.resonLIst()
  }
}
function addZero(s){
    return s < 10 ? '0' + s: s;
}
function dateForm(data){
  return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
</script>
<style scoped lang="scss">
  .item-right{
    margin-right: 15px;
  }
</style>
